<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [
			{volist name='pics' id='vo'}
			'{$vo.url}',
			{/volist}
			];
			var e_desc = '{$title}';
		</script>
<style type="text/css">
    
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

#container > div ,#container >img
{
    position: absolute;
}
.diwen 
{
    width: 600px;
    height: 150px;
}
#di1
{
    left: -25px;
    top: 730px;
    -webkit-animation: diwen_in 2s linear both;
}
#di2
{
    left: -65px;
    top: 701px;
    -webkit-animation: diwen_in 2s 0.3s linear both;
}
#di3
{
    left: -32px;
    top: 675px;
    -webkit-animation: diwen_in 2s 0.6s linear both;
}
#di4
{
    left: -66px;
    top: 655px;
    -webkit-animation: diwen_in 2s .9s linear both;
}
.diwen
{
    position: absolute;
}
#denglong1
{
    top:-40px;
    -webkit-animation: denglong 2s ease-in-out infinite alternate;
    -webkit-transform-origin: 60% 0%;
}
#denglong2
{
    left:100px;
    top:-80px;
    -webkit-animation: denglong 2s 1s ease-in-out infinite alternate backwards;
    -webkit-transform-origin: 60% 0%;
}
#mei
{
    left:220px;
    top:0px;
}
#diwen1
{
    -webkit-animation: diwen 2.5s linear infinite;
}
#diwen2
{
    -webkit-animation: diwen 2.5s 0.5s linear infinite;
}
#diwen3
{
    -webkit-animation: diwen 2.5s 1s linear infinite;
}
#diwen4
{
    -webkit-animation: diwen 2.5s 1.5s linear infinite;
}
#pagetitle
{
    left:59px;
    top:190px;
    width: 401px;
    height: 471px;
    opacity: 0;
}
#titlebox
{
    width: 354px;
    height: 183px;
    top: 130px;
    left: 15px;
    position: absolute;
    overflow: hidden;
}
#titlecell
{
    width: 354px;
    height: 183px;
    display: table;
}
#titlecontent
{
    width: 354px;
    height: 183px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    color: #FFE632;
    font-weight: bold;
    text-shadow: 7px 9px 7px #76011B;
}
.divv
{
    width: 400px;
    height: 566px;
    left: 51px;
    top: 111px;
    overflow: hidden;
    opacity: 0;
    box-shadow: 9px 10px 17px #5E051B;
}
.divh 
{
    width: 462px;
    height: 341px;
    left: 17px;
    top: 233px;
    overflow: hidden;
    opacity: 0;
    box-shadow: 9px 10px 17px #5E051B;
}
#word1>img,#word1>div
{
    position: absolute;
    opacity: 0;
}
#word1
{
    left: 288px;
    top: 470px;
}
#word2
{
    left: 55px;
    top: 548px;
    width: 186px;
    height: 100px;
    opacity: 0;
}
#word3
{
    left: 320px;
    top: 467px;
    width: 172px;
    height: 126px;
    opacity: 0;
}
#word2>img,#word2>div ,#word3>img,#word3>div ,#word4>img,#word4>div,#word5>img,#word5>div
{
    position: absolute;
}
#yu1_2
{
    background-image: url(__DIR__{$dir}/img/zi2.png);
    background-position: 0px 0px;
    width: 126px;
    height: 148px;
    left: -36px;
    top: -60px;
    -webkit-transform-origin: 70% 70%;
    -webkit-transform: rotate(-30deg) ;
}
#yu2_2
{
    background-image: url(__DIR__{$dir}/img/zi2.png);
    background-position: -161px -86px;
    width: 60px;
    height: 100px;
    left: 136px;
    top: 11px;
    -webkit-transform-origin: 15% 70%;
    -webkit-transform: rotate(30deg);
}
#jiantou_2
{
    background-image: url(__DIR__{$dir}/img/zi2.png);
    background-position: -351px 2px;
    width: 48px;
    height: 79px;
    left: 121px;
    top: -66px;
}
#ri_3
{
    left:73px;
    top:60px;
    width: 58px;
    height: 73px;
}
#word4
{
    left: 16px;
    top: 496px;
    opacity: 0;
}
#ciren_4
{
    left: 0px;
    top: 53px;
}
#jiantou_4
{
    left: 104px;
    top: -2px;
}
#ruyi1_4
{
    left: 81px;
    top: 78px;
    width: 97px;
    height: 63px;
}
#ruyi2_4
{
    left: 150px;
    top: 105px;
    width: 67px;
    height: 39px;
}
#jiantou_5
{
    left: 127px;
    top: -4px;
    opacity: 0;
}
#xin1_5
{
    left: 10px;
    top: 73px;
    -webkit-transform: scale(0);
}
#xin2_5
{
    left: 52px;
    top: 73px;
    -webkit-transform: scale(0);
}
#xin3_5
{
    left: 93px;
    top: 73px;
    -webkit-transform: scale(0);
}
#xin4_5
{
    left: 134px;
    top: 73px;
    -webkit-transform: scale(0);
}
#zi_5
{
    left: 11px;
    top: 2px;
    opacity: 0;
}
#word5
{
    left: 0px;
    top: 500px;
}
</style>
<style type="text/css">
@-webkit-keyframes denglong
{
    from  {-webkit-transform: rotate(-3deg);}
    to    {-webkit-transform: rotate(3deg);}
}
@-webkit-keyframes diwen_in
{
    0%  {-webkit-transform: translate(0px,139px);-webkit-animation-timing-function: cubic-bezier(.46,.61,.73,1);}
    51%  {-webkit-transform: translate(0px,-14px);-webkit-animation-timing-function: cubic-bezier(.2,0,.81,1)}
    76%  {-webkit-transform: translate(0px,7px);-webkit-animation-timing-function: linear;}
    100%  {-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: linear;}
}
@-webkit-keyframes diwen
{
    0%   {-webkit-transform: translate(0px,0px);}
    50%  {-webkit-transform: translate(0px,10px);}
    100% {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes title_in
{
    0%  {-webkit-transform: scale(1.2);opacity: 0;}
    80% {-webkit-transform: scale(0.95);opacity: 1}
    100%{-webkit-transform: scale(1);opacity: 1}
}

@-webkit-keyframes title_out
{
    0%  {-webkit-transform: scale(1);opacity: 1}
    50% {-webkit-transform: scale(1.1);opacity: 1}
    100%{-webkit-transform: scale(0.6);opacity: 0}
}
@-webkit-keyframes div1_in
{
    from  {-webkit-transform: translate(0px,30px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div1_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,-30px);opacity: 0}
}
@-webkit-keyframes div2_in
{
    from  {-webkit-transform: translate(0px,-30px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div2_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,30px);opacity: 0}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes div3_in
{
    from  {-webkit-transform: scale(1.15);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
/*第一幕的文字动画*/
@-webkit-keyframes word1_0
{
    from {-webkit-transform: scale(1);opacity: 1}
    to   {-webkit-transform: scale(1.06);opacity: 0.8}
}
@-webkit-keyframes word1_1
{
    from {-webkit-transform: translate(0px,0px);opacity: 1}
    to   {-webkit-transform: translate(0px,10px);opacity: 1}
}
@-webkit-keyframes word1_2
{
    from  {-webkit-transform: scale(1);opacity: 1}
    to    {-webkit-transform: scale(1.1);opacity: 1}
}
@-webkit-keyframes word1_3
{
    0%  {-webkit-transform: rotate(0deg);opacity: 1}
    32% {-webkit-transform: rotate(0deg);opacity: 1}
    100%{-webkit-transform: rotate(360deg);opacity: 1}
}
@-webkit-keyframes word1_4
{
    from  {-webkit-transform: rotate(0deg) scale(1);opacity: 1}
    to    {-webkit-transform: rotate(10deg) scale(1.1);opacity: 1}
}
@-webkit-keyframes word1_5
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-8px,-8px);opacity: 1}
}
@-webkit-keyframes word1_6
{
    0%   {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    50%  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    51%  {-webkit-transform: translate(0px,0px) rotate(30deg);opacity: 1}
    100% {-webkit-transform: translate(0px,0px) rotate(30deg);opacity: 1}
}
/*第二幕的文字动画*/
@-webkit-keyframes word2_1
{
    from  {-webkit-transform: scale(0.6);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes word2_2
{
    from  {-webkit-transform: rotate(-50deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg);opacity: 1}
}
@-webkit-keyframes word2_3
{
    from  {-webkit-transform: rotate(50deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg);opacity: 1}
}
@-webkit-keyframes word2_4
{
    from  {-webkit-transform: scale(.8);}
    to    {-webkit-transform: scale(1);}
}
@-webkit-keyframes word2_out
{
    from  {-webkit-transform: rotate(0deg);opacity: 1}
    to    {-webkit-transform: rotate(-70deg);opacity: 0}
}
@-webkit-keyframes word3_1
{
    from  {-webkit-transform: rotate(-270deg);}
    to    {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes word3_2
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(25deg);}
}
@-webkit-keyframes word3_in
{
    from  {-webkit-transform: scale(.7);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes word3_out
{
    from  {-webkit-transform: scale(1);opacity: 1}
    to    {-webkit-transform: scale(1.2);opacity: 0}
}
@-webkit-keyframes div3_out
{
    from  {-webkit-transform: scale(1);opacity: 1}
    to    {-webkit-transform: scale(.6);opacity: 0}
}
@-webkit-keyframes div4_in
{
    from  {-webkit-transform: translate(-50px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div4_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(50px,0px);opacity: 0}
}
@-webkit-keyframes div5_in
{
    from  {-webkit-transform: translate(50px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div5_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-50px,0px);opacity: 0}
}
/*第四幕文字*/
@-webkit-keyframes word4_1
{
    from  {-webkit-transform: scale(.9);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes word4_2
{
    from  {-webkit-transform: translate(20px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes word4_3
{
    from  {-webkit-transform: translate(50px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes word4_4
{
    from  {opacity: 1}
    to    {opacity: 0.3}
}
@-webkit-keyframes word4_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-50px,0px);opacity: 0}
}
/*第五幕文字*/
@-webkit-keyframes word5_1
{
    0%   {-webkit-transform: scale(0.2);}
    80%  {-webkit-transform: scale(1.5);}
    100% {-webkit-transform: scale(1);}
}
@-webkit-keyframes word5_2
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(5px,-5px);opacity: 1}
}
@-webkit-keyframes word5_3
{
    from  {-webkit-transform: scale(1);}
    to    {-webkit-transform: scale(1.25);}
}

</style>

<div id="container">
    <img src="__DIR__{$dir}/img/bg.jpg">

    <div id="div1h" class="divh">
        <img id="img1h" style="position:absolute">
    </div>
    <div id="div1v" class="divv">
        <img id="img1v" style="position:absolute">
    </div>

    <div id="div2v" class="divv">
        <img id="img2v" style="position:absolute">
    </div>
    <div id="div2h" class="divh">
        <img id="img2h" style="position:absolute">
    </div>

    <div id="div3v" class="divv">
        <img id="img3v" style="position:absolute">
    </div>
    <div id="div3h" class="divh">
        <img id="img3h" style="position:absolute">
    </div>

    <div id="div4v" class="divv">
        <img id="img4v" style="position:absolute">
    </div>
    <div id="div4h" class="divh">
        <img id="img4h" style="position:absolute">
    </div>

    <div id="div5v" class="divv">
        <img id="img5v" style="position:absolute">
    </div>
    <div id="div5h" class="divh">
        <img id="img5h" style="position:absolute">
    </div>

    <img id="denglong1" src="__DIR__{$dir}/img/denglong.png">
    <img id="denglong2" src="__DIR__{$dir}/img/denglong.png">
    <img id="mei" src="__DIR__{$dir}/img/mei.png">

    <div id="di4" class="diwen">
        <img id="diwen4" width="600" src="__DIR__{$dir}/img/di.png">
    </div>
    <div id="di3" class="diwen">
        <img id="diwen3" width="600" src="__DIR__{$dir}/img/di.png">
    </div>
    <div id="di2" class="diwen">
        <img id="diwen2" width="600" src="__DIR__{$dir}/img/di.png">
    </div>
    <div id="di1" class="diwen">
        <img id="diwen1" width="600" src="__DIR__{$dir}/img/di.png">
    </div>

    <div id="word1">
        <img id="jiantou_1" src="__DIR__{$dir}/img/jiantou.png" style="left: 38px;top: -3px;">
        <img id="ciren_1" src="__DIR__{$dir}/img/ciren.png" style="left: 63px;top: 54px;">
        <img id="hou_1" src="__DIR__{$dir}/img/hou.png" style="left: -12px;top: 95px;">
        <img id="nian_1" src="__DIR__{$dir}/img/nian.png" style="left: 68px;top: 98px;">
        <img id="bi_1" src="__DIR__{$dir}/img/bi.png" style="left: 102px;top: 106px;">
        <img id="fa_1" src="__DIR__{$dir}/img/fa.png" style="left: 145px;top: 102px;">
        <img id="yuanbao1_1" src="__DIR__{$dir}/img/1.png" style="left: 87px;top: -17px;">
        <img id="yuanbao2_1" src="__DIR__{$dir}/img/1.png" style="left: 143px;top: 42px;">
        <img id="yuanbao3_1" src="__DIR__{$dir}/img/1.png" style="left: -3px;top: 40px;">
    </div>

    <div id="word2">
        <div id="yu1_2"></div>
        <div id="yu2_2"></div>
        <div id="jiantou_2"></div>
        <img id="hongyun_2" src="__DIR__{$dir}/img/zi21.png">
    </div>

    <div id="word3">
        <img id="zhengzheng_3" src="__DIR__{$dir}/img/zi4.png">
        <div id="ri_3">
            <img src="__DIR__{$dir}/img/zi41.png" style="position:absolute;-webkit-animation: word3_2 1s linear infinite alternate">
        </div>
    </div>

    <div id="word4">
        <img id="ciren_4" src="__DIR__{$dir}/img/zi31.png">
        <img id="jiantou_4" src="__DIR__{$dir}/img/zi32.png">
        <div id="ruyi1_4">
            <img id="ruyi1" src="__DIR__{$dir}/img/zi33.png">
        </div>
        <div id="ruyi2_4">
            <img id="ruyi2" src="__DIR__{$dir}/img/zi34.png">
        </div>
    </div>

    <div id="word5">
        <img id="xin1_5" src="__DIR__{$dir}/img/xin.png">
        <img id="xin2_5" src="__DIR__{$dir}/img/xin.png">
        <img id="xin3_5" src="__DIR__{$dir}/img/xin.png">
        <img id="xin4_5" src="__DIR__{$dir}/img/xin.png">
        <img id="zi_5" src="__DIR__{$dir}/img/zi5.png">
        <img id="jiantou_5" src="__DIR__{$dir}/img/zi32.png">
    </div>


    <div id="pagetitle" style="animation: title_out 1s linear both;">
        <img src="__DIR__{$dir}/img/title.png">
        <div id="titlebox">
            <div id="titlecell">
                <div id="titlecontent">文</div>
            </div>
        </div>
    </div>

</div>



<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var timeout0;
var timeout1;
var timeout2;
var timeout3;
var timeout4;
var timeout5;
var timeout6;
var timeout7;
var timeout8;
var timeout9;
var timeout10;
var timeout11;
var timeout12;

var delaytime=5000;
function load_images()
{
    checkbtn();
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    showtitle();
    canshow = true;
    
    bl_keepload = 'first';
    step_load();     
}
//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }

    }
}
function id(name)
{
    return document.getElementById(name);
}

function showtitle()
{
    var pagetitle = id('pagetitle');
    var titlecontent = id('titlecontent');

    pagetitle.style.webkitAnimation = 'title_in 0.8s linear both';
    titlecontent.innerHTML = e_desc;

}

function distitle()
{
    id('pagetitle').style.webkitAnimation = 'title_out 1s linear both';

    timeout1 = setTimeout(show1,1000);
}

function show1()
{
    timeout2 = setTimeout(show2,4000);
    setImage('1');
    if(image_url_index != slider_images_url.length)
    {
        id('div1h').style.webkitAnimation = 'div1_in 1.5s cubic-bezier(.27,.27,.77,1) both';
        id('div1v').style.webkitAnimation = 'div1_in 1.5s cubic-bezier(.27,.27,.77,1) both';

        showword1();
        clearani2();
    }
    image_url_index ++;
}

function showword1()
{
    var objname = ['ciren_1','hou_1','nian_1','bi_1','fa_1','jiantou_1','yuanbao1_1','yuanbao2_1','yuanbao3_1'];

    for(var i = 0;i < objname.length; i ++)
    {
        id(objname[i]).style.webkitAnimation = 'fadein 0.5s linear '+ i*0.1 + 's both'; 
    }

    timeout3 = setTimeout(showword1move,1500);

}

function showword1move()
{
    id('jiantou_1').style.webkitAnimation = 'word1_5 0.5s linear infinite alternate';
    id('ciren_1').style.webkitAnimation = ' word1_0 0.5s linear infinite alternate';
    id('hou_1').style.webkitAnimation = 'word1_1 0.8s linear infinite alternate';
    id('nian_1').style.webkitAnimation = 'word1_2 0.8s linear infinite alternate';
    id('bi_1').style.webkitAnimation = 'word1_3 2.5s linear infinite';
    id('fa_1').style.webkitAnimation = 'word1_4 0.4s linear infinite alternate';
    id('yuanbao1_1').style.webkitAnimation = 'word1_6 0.7s linear infinite';
    id('yuanbao2_1').style.webkitAnimation = 'word1_6 0.7s 0.2s linear infinite backwards';
    id('yuanbao3_1').style.webkitAnimation = 'word1_6 0.7s 0.5s linear infinite backwards';
}

function clearani1()
{
    var objname = ['word1','ciren_1','hou_1','nian_1','bi_1','fa_1','jiantou_1','yuanbao1_1','yuanbao2_1','yuanbao3_1','div1h','div1v'];

    for(var i = 0;i < objname.length; i ++)
    {
        id(objname[i]).style.webkitAnimation = ''; 
    }
}

function show2()
{
    timeout4 = setTimeout(show3,4000)
    setImage('2');
    if(image_url_index != slider_images_url.length)
    {
        id('div1h').style.webkitAnimation = 'div1_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('div1v').style.webkitAnimation = 'div1_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('word1').style.webkitAnimation = 'fadeout 1.2s linear both';

        id('div2v').style.webkitAnimation = 'div2_in 1.5s 0.5s cubic-bezier(.27,.27,.77,1) both';
        id('div2h').style.webkitAnimation = 'div2_in 1.5s 0.5s cubic-bezier(.27,.27,.77,1) both';    

        showword2();
        clearani3();
    }

    image_url_index++;
}

function showword2()
{
    id('word2').style.webkitAnimation = 'fadein 1s 1s linear both';
    id('hongyun_2').style.webkitAnimation = 'word2_1 0.8s linear both';
    id('yu2_2').style.webkitAnimation = 'word2_3 1s 1.3s cubic-bezier(.65,.68,.72,.98) both';
    id('yu1_2').style.webkitAnimation = 'word2_2 1s 1.5s cubic-bezier(.65,.68,.72,.98) both';
    id('jiantou_2').style.webkitAnimation = 'word2_4 0.5s linear infinite alternate';

}

function clearani2()
{
    var objname = ['word2','hongyun_2','yu2_2','yu1_2','jiantou_2','div2h','div2v'];

    for(var i = 0;i < objname.length; i ++)
    {
        id(objname[i]).style.webkitAnimation = ''; 
    }
}

function show3()
{
    timeout5 = setTimeout(show4,4000)
    setImage('3');
    if(image_url_index != slider_images_url.length)
    {
        id('div2v').style.webkitAnimation = 'div2_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('div2h').style.webkitAnimation = 'div2_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('word2').style.webkitAnimation = 'word2_out 1s linear both';

        id('div3v').style.webkitAnimation = 'div3_in 1.2s 0.5s linear both';
        id('div3h').style.webkitAnimation = 'div3_in 1.2s 0.5s linear both';

        showword3();
        clearani4();      
    }
    image_url_index ++;
}

function showword3()
{
    id('word3').style.webkitAnimation = 'word3_in 1s 0.5s both';
    id('ri_3').style.webkitAnimation = 'word3_1 2s 1s ease-out both';
}

function clearani3()
{
    var objname = ['word3','ri_3','div3h','div3v'];

    for(var i = 0;i < objname.length; i ++)
    {
        id(objname[i]).style.webkitAnimation = ''; 
    }
}

function show4()
{
    timeout6 = setTimeout(show5,4000);
    setImage('4');

    if(image_url_index != slider_images_url.length)
    {
        id('div3v').style.webkitAnimation = 'div3_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('div3h').style.webkitAnimation = 'div3_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('word3').style.webkitAnimation = 'word3_out 1s linear both';

        id('div4v').style.webkitAnimation = 'div4_in 1.2s 0.5s linear both';
        id('div4h').style.webkitAnimation = 'div4_in 1.2s 0.5s linear both';

        showword4();
        clearani5();
    }
    image_url_index ++;
}

function showword4()
{
    id('word4').style.webkitAnimation = 'fadein 0.2s 0.8s linear both';
    id('jiantou_4').style.webkitAnimation = 'word4_1 0.7s 0.8s linear both';
    id('ciren_4').style.webkitAnimation = 'fadein 0.7s 0.8s linear both';
    id('ruyi1_4').style.webkitAnimation = 'word4_2 0.7s 0.8s linear both';
    id('ruyi2_4').style.webkitAnimation = 'word4_3 0.7s 0.8s linear both';

    timeout7 = setTimeout(showword4move,1500)
}

function showword4move()
{
    id('ruyi1').style.webkitAnimation = 'word4_4 0.6s 0.2s ease-out infinite alternate';
    id('ciren_4').style.webkitAnimation = 'word4_4 0.6s ease-out infinite alternate';
    id('ruyi2').style.webkitAnimation = 'word4_4 0.6s 0.4s ease-out infinite alternate';
}

function clearani4()
{
    var objname = ['word4','jiantou_4','ciren_4','ruyi1_4','ruyi2_4','div4h','div4v'];

    for(var i = 0;i < objname.length; i ++)
    {
        id(objname[i]).style.webkitAnimation = ''; 
    }
} 

function show5()
{
    timeout8 = setTimeout(show1_1,4000)
    setImage('5');
    if(image_url_index != slider_images_url.length)
    {
        id('div4v').style.webkitAnimation = 'div4_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('div4h').style.webkitAnimation = 'div4_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('word4').style.webkitAnimation = 'word4_out 1s linear both';

        id('div5v').style.webkitAnimation = 'div5_in 1.2s 0.5s linear both';
        id('div5h').style.webkitAnimation = 'div5_in 1.2s 0.5s linear both';

        showword5();
        clearani1();  
    }
    image_url_index++;
}


function showword5()
{
    id('xin4_5').style.webkitAnimation = 'word5_1 0.5s linear both';
    id('xin3_5').style.webkitAnimation = 'word5_1 0.5s 0.1s linear forwards';
    id('xin2_5').style.webkitAnimation = 'word5_1 0.5s 0.2s linear forwards';
    id('xin1_5').style.webkitAnimation = 'word5_1 0.5s 0.3s linear forwards';
    id('zi_5').style.webkitAnimation = 'fadein 0.5s 0.8s linear both';
    id('jiantou_5').style.webkitAnimation = 'word5_2 0.5s 0.8s linear infinite alternate';

    timeout9 = setTimeout(showword5move,1000);
}

function showword5move()
{
    id('xin1_5').style.webkitAnimation = 'word5_3 0.5s linear infinite alternate';
    id('xin2_5').style.webkitAnimation = 'word5_3 0.5s linear infinite alternate';
    id('xin3_5').style.webkitAnimation = 'word5_3 0.5s linear infinite alternate';
    id('xin4_5').style.webkitAnimation = 'word5_3 0.5s linear infinite alternate';
}

function clearani5()
{
    var objname = ['xin1_5','xin2_5','xin3_5','xin4_5','word5','jiantou_5','zi_5','div5h','div5v'];

    for(var i = 0;i < objname.length; i ++)
    {
        id(objname[i]).style.webkitAnimation = ''; 
    }
}

function show1_1()
{
    timeout10 = setTimeout(show2,5000);
    setImage('1');
    if(image_url_index != slider_images_url.length)
    {
        id('div5v').style.webkitAnimation = 'div5_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('div5h').style.webkitAnimation = 'div5_out 1.2s cubic-bezier(.2,.01,.71,.72) both';
        id('word5').style.webkitAnimation = 'fadeout 1s linear both';

        id('div1h').style.webkitAnimation = 'div1_in 1.5s 1s cubic-bezier(.27,.27,.77,1) both';
        id('div1v').style.webkitAnimation = 'div1_in 1.5s 1s cubic-bezier(.27,.27,.77,1) both';

        clearani2();
        timeout11 = setTimeout(showword1,1000)
    }
    image_url_index ++;
}

function setImage(idname)
{
    if(image_url_index == slider_images_url.length)
    {
         clearTimeout(timeout0);
         clearTimeout(timeout1);
         clearTimeout(timeout2);
         clearTimeout(timeout3);
         clearTimeout(timeout4);
         clearTimeout(timeout5);
         clearTimeout(timeout6);
         clearTimeout(timeout7);
         clearTimeout(timeout8);
         clearTimeout(timeout9);
         clearTimeout(timeout10);
         clearTimeout(timeout11);
         timeout12 = setTimeout(function () {
            id('enddiv').style.display = 'block';
            id('enddiv').style.webkitAnimation = 'fadein 1s linear both';
            id('title_text').innerHTML = e_desc;
        },1000)
        return;
    }
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;
    }

    if(image_url_index % step_loadnum == 0)
    {
        // alert()
        step_load();
    }
    console.log('setimg:' + Onload_imgs_url[image_url_index]);

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div1;
    var divname;

    if(img_bili > 1)
    {
        divname = idname + 'h';
        div = id('div'+idname+'h');
        div1 = id('div'+idname+'v');
        width = 462;
        height = 341;
    }
    else
    {
        divname = idname + 'v';
        div = id('div'+idname+'v');
        div1 = id('div'+idname+'h');
        width = 400;
        height = 566;
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var img = id('img'+divname);
    img.src = Onload_imgs_url[image_url_index];
    console.log(img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }

}
call_me(load_images);

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
     clearTimeout(timeout0);
     clearTimeout(timeout1);
     clearTimeout(timeout2);
     clearTimeout(timeout3);
     clearTimeout(timeout4);
     clearTimeout(timeout5);
     clearTimeout(timeout6);
     clearTimeout(timeout7);
     clearTimeout(timeout8);
     clearTimeout(timeout9);
     clearTimeout(timeout10);
     clearTimeout(timeout11);
     clearTimeout(timeout12);

     clearani1();
     clearani2();
     clearani3();
     clearani4();
     clearani5();

     id('pagetitle').style.webkitAnimation = '';
     id('titlecontent').innerHTML = '';

     id('enddiv').style.display = 'none';
     id('enddiv').style.webkitAnimation = '';
}
function checkbtn ()
{
    //if(editmode)
  //  {
   //     id('reshowbtn').style.left = '165px';
   //     id('guanzhubtn').style.display = 'none';
   // }
}
</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css">
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css">

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

